
<template>
	<view class="content">
		<view class="header">
			<view class="h-btn" :class="{active:active==1}" @click="clickBtn(1)">未使用</view>
			<view class="h-btn" :class="{active:active==2}" @click="clickBtn(2)">已使用</view>
			<view class="h-btn" :class="{active:active==3}" @click="clickBtn(3)">已过期</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick" :top="40 +'px'">
			<good-list :list="goods" @clickRow="clickRow" class="goodlist" :type="type"></good-list>
		</mescroll-uni>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import goodList from "./goodList.vue";
	export default {
		components: {
			goodList
		},
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		data() {
			return {
				active:1,
				downOption: {
					auto: true ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textOutOffset:this.$t('mescroll.shifanggenxin'),
					textInOffset:this.$t('mescroll.xialashuaxin'),
					textLoading:this.$t('mescroll.jiazaizhong'),
					textSuccess:this.$t('mescroll.jiazaichenggong'),
					textErr:this.$t('mescroll.jiazaishibai'),
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无记录 ~',
						fixed:true,
						top: "200rpx",
					},
					textNoMore:this.$t('mescroll.chudile')
				},
			}
		},
		onLoad() {},
		methods:{
			clickBtn(index){
				this.active=index
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.getList(page)
				this.mescroll.endErr();
			},
			getList(page) {
				let params = {
					matchType:this.active ,//体育类型  1足球  2篮球  默认1
					rankType:this.type,//榜单类型  1周榜  2月榜  默认1
					page:page.num
				}
				uni.$u.http.get(apiList[this.type], {params:params}).then(res => {
					console.log(res);
					if(page.num==1){
						this.goods = [];
					}
					if(res.code==200&&res.data&&res.data.data){
						console.log(res.data.next_page_url?true:false);
						this.mescroll.endSuccess(res.data.data.length,res.data.next_page_url?true:false);
						this.goods=this.goods.concat(res.data.data)
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;
		.header{
			width: 100%;background-color: #242448;padding:8px 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;justify-content: space-around;font-size: 12px;
			.active{
				color: #c72d5e;
			}
		}
		.item{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;
			.text{
				margin-left: 10px;
			}
		}
	}
</style>
